<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>添加角色</title>
		<link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
	    <link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
        <link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
	    <script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
	    <script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="/webapp/js/lib/jquery.global.settings.js"></script>
	    <script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>
	    <script type="text/javascript" src="/webapp/js/common/config.js"></script>
	</head>
	<body>
		<div class="easyui-container-fluid">
			<div class="easyui-panel" style="border: none;">
                <div id="nav" class="nav"></div>
                <div class="easyui-panel" style="border:none;">
                       <form id="ff" class="easyui-form" method="post" data-options="">
                              <div style="margin-bottom:20px">
                                  <label class="item-label"><span class="item-required">*</span>名称：</label>
                                  <input class="easyui-textbox" name="name" style="" data-options="required:true">
                              </div>
                              <div style="margin-bottom:20px">
                                  <label class="item-label"><span class="item-required">*</span>权限：</label>
                                  <select id="permissions" class="easyui-combobox" name="permissions" style="width:174px">
                                  </select>
                              </div>
                       </form>
                       <div style="margin-left:100px;margin-bottom:20px;">
                              <a href="javascript:void(0)" class="easyui-linkbutton c8" onclick="submitForm()" style="width:80px">保存</a>
                              <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">取消</a>
                       </div>
                </div>
              </div>
        </div>
	</body>
    <script type="text/javascript">
        var id=getQueryParameter("id");
        var permissions = {};
        function submitForm(){
          $('#ff').form('submit',{
            onSubmit:function(){
               var valid = $(this).form('enableValidation').form('validate');
               if(valid){
                    var data = getFormData(document.getElementById("ff"));
                    var permission_tmp = data.permissions;
                    permission_tmp = permission_tmp.filter(function (item,index) {
                       return item != "";
                    });
                    var userPermissions = [];
                    $(permission_tmp).map(function (index,item) {
                        var permission_item = permissions[item];
                        userPermissions.push({id:permission_item.id,name:permission_item.name});
                    });
                    data.permissions = userPermissions;
                    var method = "post";
                    if(id){
                        data.id = id;
                        method = "patch";
                    }
                    $.ajax({
                        url:config.url+"/role",
                        type:method,
                        data:JSON.stringify(data),
                        dataType:'json',
                        crossDomain:true,
                        contentType:'application/json;charset=UTF-8',
                        xhrFields:{withCredentials:true},
                        beforeSend:function(){
                            $.messager.progress({
                                title:"请稍等",
                                interval:50,
                                text:"操作进行中..."
                            });
                        },
                        complete:function(){
                            $.messager.progress("close");
                        },
                        success:function(data){
                             if(data.code==200){
                                    $.messager.alert("提示","操作成功","info",function () {
                                        window.location.href = "/webapp/pages/system/role/list.html";
                                    });
                             }
                        },
                        error:function(XHRHttpRequest,textStatus,errorThrown){
                            $.messager.alert("提示","操作失败","error");
                        }
                    });
               }
               return false;
            }
          });

        }
        function clearForm(){
            window.location.href = "/webapp/pages/system/role/list.html";
        }
        $(function () {
            //setNav();
            if (id) {
                $.when(condition()).done(function () {
                    $.ajax({
                        url: config.url + "/role",
                        type: 'get',
                        data: {id: id},
                        xhrFields: {withCredentials: true},
                        success: function (data) {
                            //填充表单
                            if (data) {
                                $("#ff").form("load", changeProperty2String(data.content[0]));
                                if (data.content[0] && data.content[0].permissions) {

                                    var permissions = [];
                                    $(data.content[0].permissions).map(function (index, item) {
                                        permissions.push({id: item.id, text: item.name});
                                    });
                                    $("#permissions").combotree("setValues", permissions);
                                }
                            }
                        },
                        error: function () {

                        }
                    });
                });
            } else {
                condition();
            }

            function condition() {
                var dtd = $.Deferred();
                $.ajax({
                    url: config.url + "/permission/getAll",
                    type: 'get',
                    xhrFields: {withCredentials: true},
                    success: function (data) {
                        if (data) {
                            $(data).map(function (index, item) {
                                permissions[item.id] = item;
                            });
                            var perms = buildPermissions(data);
                            //data.unshift({"text":"-请选择-","id":""});
                            $("#permissions").combotree({textField:"name",valueField:"id",multiple: true,cascadeCheck:false}).combotree("loadData", perms);
                            $("#permissions").combotree("setValue", {id: "", text: "-请选择-"});
                            dtd.resolve();
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        dtd.reject();
                    }
                });
                return dtd.promise();
            }
            function buildPermissions(data){
                var maps = {},groups = {};
                data.map(function(item,index){
                    item.text = item.name;
                    maps[item.id] = item;
                    var parentId = item.parentId;
                    if(groups[parentId]){
                        groups[parentId].push(item);
                    }else{
                        groups[parentId] = [item];
                    }
                });
                //console.log(groups);
                var root = groups[""];
                root.map(function(item,index){
                    var children = groups[item.id];
                    if(children){
                        item.children = groups[item.id];
                        children.map(function(subitem,index){
                            var subchildren = groups[subitem.id];
                            if(subchildren){
                                subitem.children = subchildren;
                            }
                        });
                    }

                });
                return root;
            }
        });
       </script>
</html>